<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列表渲染案例-key</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    .el-row {
      margin-bottom: 4px;
    }
    .el-col {
      border-radius: 4px;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .bg-purple {
      background: #d3dce6;
    }
  </style>
</head>
<body>
  <div id="app">
    <el-form :model="formData" ref="form" label-width="80px">
      <el-form-item label="用户ID:">
        <el-col :span="11"><el-input v-model="formData.uid"></el-input></el-col>
      </el-form-item>
      <el-form-item label="用户名:">
        <el-col :span="11"><el-input v-model="formData.uname"></el-input></el-col>
      </el-form-item>
      <el-row>
        <el-button type="primary" @click="addUser">立即添加</el-button>
        <el-button>取消</el-button>
      </el-row>
    </el-form>
    <!-- 用户信息列表 -->
    <div>
      <el-row :gutter="10">
        <el-col :span="4" ><div class="grid-content bg-purple">序号</div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple">选择</div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple">用户id</div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">用户名</div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple">操作</div></el-col>
      </el-row>
      <!-- 使用v-for 对 el-row 进行遍历 -->
      <el-row :gutter="10" v-for="(user, index) in users" >
        <el-col :span="4" ><div class="grid-content bg-purple">{{ index }}</div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"> <input type="checkbox"> </div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple">{{ user.uid }}</div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">{{ user.uname }}</div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple">
          <el-button type="primary" icon="el-icon-edit" size="mini" circle></el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" circle></el-button>
        </div></el-col>
      </el-row>
    </div>

  </div>
</body>
<script src="./src/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      formData: {
        uid: 0,
        uname: ''
      },
      users: [
        {uid: 1000001, uname: '刘备'},
        {uid: 1000002, uname: '关羽'}
      ]
    },
    methods: {
      addUser(){
        console.log(this.formData);
        // 增加到数据源中
        // push   {}
        if(this.formData.uname == "" || this.formData.uid == 0) return;
        // this.users.push(this.formData);
        this.users.unshift(this.formData);
        console.log(this.users);
        // 对于 formData的数据 用完之后要还原
        this.formData = {uid: 0, uname: ""};
      }
    },
  });
</script>
</html>